<template>
  <div class="container" ref="more">
    <div class="more">
      <div class="header">
        <div class="top">
          <img class="back" src="./icons/head-back.png" alt="" @click="back">
          <img class="top-font" src="./icons/head-logo.png" alt="">
          <div class="top-click">
            <img src="./icons/more.png" alt="">
          </div>
        </div>
        <div class="header-font">
          <p class="font" @click="top(fon.slot)" v-for="(fon, key) in font" :key="key">{{fon.title}}</p>
        </div>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'more',
  data () {
    return {
      font: [
        {title: '火爆拼团中', slot: '/tomorrow'},
        {title: '明日预告', slot: '/underway'}
      ]
    }
  },
  methods: {
    top (path) {
      this.$router.push({path})
    },
    back () {
      this.$router.push({path: '/home'})
    }
  },
  mounted () {
    this.$nextTick(() => {
      let more = this.$refs.more
      let scroll = new BScroll(more, {
        click: true,
        scrollY: true,
        bounce: false
      })
      return scroll
    })
  }
}
</script>

<style scoped lang="scss">
  .container{
    width: 100vw;
    height: 100vh;
    .more{
      width: 100vw;
      height: 150vh;
      overflow: hidden;
      .header{
        height: 496px;
        background: url("./icons/banner.png") no-repeat;
        background-size: 100% 100%;
        .top{
          height: 115px;
          display: flex;
          padding-top: 35px;
          .back{
            width: 66px;
            height: 66px;
            margin-left: 35px;
          }
          .top-font{
            height: 78px;
            margin: -5px 0 0 380px;
          }
          .top-click{
            img{
              width: 66px;
              height: 66px;
              margin-left: 380px;
            }
          }
        }
        .header-font{
          height: 110px;
          margin-top: 80px;
          font-size: 52px;
          display: flex;
          .font{
            width: 50vw;
            line-height: 85px;
            text-align: center;
            color: #fff;
            text-decoration: none;
          }
        }
      }
    }
  }
</style>
